<template>
  <Row>
    <!-- <Row  :gutter="16" class="homeCard">
    <Col span="6">

    <Card shadow>
      <p slot="title">未发货订单</p>
<Icon type="md-cart" size="30" />
<h1>5</h1>
    </Card>

    </Col>
    <Col span="6">

    <Card shadow>
      <p slot="title">商城会员总数</p>
<Icon type="ios-contact" />
<h1>{{vipNumber}}</h1>
    </Card>

    </Col>
        <Col span="6">

    <Card shadow>
      <p slot="title">商城商品总数</p>
<Icon type="md-basket" />
<h1>100</h1>
    </Card>

    </Col>
        <Col span="6">

    <Card shadow>
      <p slot="title">Use a card with a shadow effect</p>
      <p>Content of card</p>
      <p>Content of card</p>
      <p>Content of card</p>
    </Card>

    </Col>
    </Row>
    <br>
    <Row :gutter="16">
      <Col span="8" style="text-align: center;">
    <i-Circle :size="250" :trail-width="4" :stroke-width="5" :percent="75" stroke-linecap="square" stroke-color="#43a3fb">
      <div class="demo-Circle-custom">
        <h1>42,001,776</h1>
        <p>消费人群规模</p>
        <span>
          总占人数
          <i>75%</i>
        </span>
      </div>
    </i-Circle>
    </Col>
    <Col span="8" style="text-align: center;">
    <i-Circle :size="250" :trail-width="4" :stroke-width="5" :percent="75" stroke-linecap="square" stroke-color="#43a3fb">
      <div class="demo-Circle-custom">
        <h1>42,001,776</h1>
        <p>消费人群规模</p>
        <span>
          总占人数
          <i>75%</i>
        </span>
      </div>
    </i-Circle>
    </Col>
    <Col span="8" style="text-align: center;">
    <i-Circle :size="250" :trail-width="4" :stroke-width="5" :percent="75" stroke-linecap="square" stroke-color="#43a3fb">
      <div class="demo-Circle-custom">
        <h1>42,001,776</h1>
        <p>消费人群规模</p>
        <span>
          总占人数
          <i>75%</i>
        </span>
      </div>
    </i-Circle>
    </Col>
    </Row>
     -->
  </Row>
</template>

<script>
export default {
  data() {
    return {
      vipNumber: 0
    };
  },
  components: {},
  created() {
    this.getVipNumber();
  },
  methods: {
    getVipNumber: function() {
      let _self = this;
      $.ajax({
        url: BASE_URL + "membermanagement/memberCount",
        type: "get",
        success: function(e) {
          _self.vipNumber = e;
        }.bind(this)
      });
    }
  }
};
</script>

<style>
.demo-Circle-custom h1 {
  color: #3f414d;
  font-size: 28px;
  font-weight: normal;
}
.demo-Circle-custom p {
  color: #657180;
  font-size: 14px;
  margin: 10px 0 15px;
}
.demo-Circle-custom span {
  display: block;
  padding-top: 15px;
  color: #657180;
  font-size: 14px;
}
.demo-Circle-custom span:before {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  margin: 0 auto;
  background: #e0e3e6;
  position: relative;
  top: -15px;
}
.demo-Circle-custom span i {
  font-style: normal;
  color: #3f414d;
}
</style>